<template>
  <div>
    <a-button  type="primary" @click="showModal" v-if="!$store.state.login"
    style=" width: 100px; height: 40px; background-color: #fff; margin-left: 10px; border-radius: 15px;
       color: #5dcddc; font-size: 16px;    font-weight: bold; line-height: 30px; text-align: center; display: block;">
      登录/注册
    </a-button>
    
    <div v-else class="userInfo" @mouseenter="showLogout = true" @mouseleave="showLogout = false">
      <img :src="$store.state.userInfo.avatarUrl" class="avatar" alt="用户头像">
      <span class="nickname">{{ $store.state.userInfo.nickname }}</span>

      <div v-show="showLogout" class="loginOut">
        <button @click="loginClose">退出登录</button>
        <button @click="TouserCenter">个人中心</button>
      </div>
    </div>

    <a-modal
      v-model="visible"
      :title="null"
      :footer="null"
      width="400px"
      centered
    >
      <div class="login-container">
        <div class="logintitle">
          <span>普通登录</span>
        </div>

        <div class="login-form">
          <div class="username">
            <input 
              v-model="username" 
              placeholder="请输入账户名" 
            />
          </div>

          <div class="password">
            <input 
              v-model="password" 
              type="password"
              placeholder="请输入密码" 
            />
          </div>

          <button class="login-btn" @click="login">登录</button>
        </div>

        <div class="login-footer">
          <a>立即注册！</a>
          <a>忘记密码？</a>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getLogin } from '@/api/request';
export default {
  data() {
    return {
      visible: false,
      username: '',
      password: '',
      showLogout: false 
    };
  },
  methods: {
    TouserCenter() {
      this.$router.push('/userCenter'); 
    },
    showModal() {
      this.visible = true;
    },
    login() {
      getLogin(this.username, this.password).then(res => {
        if (res.code === 0) {
          this.$store.commit('setUserInfo', res.userInfo);
          this.$store.commit("setLogin", true);
          this.visible = false;
        } else {
          this.$message.error('登录失败');
        }
      });
    },
    loginClose() {
      this.$store.commit("setLogin", false);
      this.$store.commit("setUserInfo", {});
      this.$message.success('已退出登录');
      this.$router.push('/'); 
      localStorage.clear();
    }
  }
};
</script>

<style scoped>
.login-container {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.logintitle {
  justify-content: center;
  margin-bottom: 30px;
  font-size: 16px;
  display: flex;
  justify-content: center; 
  align-items: center; 
}

.logintitle span {
  padding: 0 15px;
  cursor: pointer;
  color: #00cf8c;
  position: relative;
  border-bottom: #00cf8c 3px solid;
}

.username, .password {
  margin-bottom: 20px;
}

.username input,
.password input {
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.password input:focus,
.username input:focus {
  border-color: #00cf8c;
}

.login-btn {
  width: 100%;
  height: 40px;
  background: #00cf8c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.login-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.login-footer a {
  color: gray;
  cursor: pointer;
  text-decoration: none;
}

.login-footer a:hover {
  color: #00cf8c;
}

.userInfo {
width: 80px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.nickname {
  color: #101010;
  font-size: 14px;
}

.loginOut {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 999;
}

.loginOut button {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
}

.loginOut button:hover {
  background-color: #ace4d3;
}
</style>